<template>
    <div class="app-container-echart">
        <div class="chart" style="height:300px;width:100%;" />
    </div>
</template>

<script>

import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '@/views/dashboard/components/mixins/resize'

export default {
    mixins: [resize],
    name: "question",
    data() {
        return {
            chart: null
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.initChart();
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    methods:{
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons');
            var times = ['A部门','B部门','C部门','C部门','D部门','E部门'];
            var datas = [101,39,67,101,39,67];
            this.setOptions(times, datas)
        },
        getGradientColor(color11, color22){
            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {offset: 0, color: color11},
                {offset: 1, color: color22}]) ;
        },
        setOptions(times, datas) {
            var barWidth = 30;
            this.chart.setOption({
                title: {
                    text: '部门题库数',
                    left:'center'
                },
                tooltip: {
                    trigger: "axis",
                    // formatter: function (params) {
                    //     var str = params[0].axisValue;
                    //     params.filter(function (item) {
                    //         if (item.componentSubType == "bar") {
                    //             str += "<br/>" + item.seriesName + "：" + (item.value == "" ? 0 : item.value);
                    //         }
                    //     });
                    //     return str;
                    // },
                    show: true,
                    backgroundColor: '#e5e9e7',
                    textStyle: {
                        fontSize: 12,
                        color: '#152934',
                        lineHeight: 50
                    },
                },
                grid: {
                    left: "10",
                    right: "10",
                    top: "15%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: {
                    name: '',
                    data: times,
                    axisTick: {
                        show: false,
                    },
                    nameTextStyle: {
                        color: '#2683CB',
                        fontSize: '14',
                        fontWeight: '400',
                        padding: [20, 0, 0, -35]
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1F8BC6',
                            width: 1,
                            opacity: 0.3
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize: '14',
                            fontWeight: '400',
                        },
                    },
                },
                yAxis: {
                    name: '数量',
                    axisLine: {
                        show: false
                    },
                    nameTextStyle: {
                        color: '#2583CB',
                        fontSize: '14',
                        fontWeight: '400',
                        padding: [0, 40, 0, 0]
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1F8BC6',
                            width: 1,
                            opacity: 0.3
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize: '14',
                            fontWeight: '400',
                        }
                    }
                },
                series: [
                    {
                        z: 1,
                        name: '人数',
                        type: "bar",
                        barWidth: barWidth,
                        barGap: "0%",
                        data: datas,
                        itemStyle: {
                            normal: {
                                color: this.getGradientColor('#4EBDE3', '#3E82DF'),
                            },
                        },
                    },
                    {
                        z: 2,
                        name: '人数',
                        type: "pictorialBar",
                        data: datas,
                        tooltip: { show: false },
                        symbol: "diamond",
                        symbolOffset: ["0%", "50%"],
                        symbolSize: [barWidth, 10],
                        itemStyle: {
                            normal: {
                                color: '#4EBDE3',
                            },
                        },
                    },
                    {
                        z: 3,
                        name: '人数',
                        type: "pictorialBar",
                        symbolPosition: "end",
                        data: datas,
                        tooltip: { show: false },
                        symbol: "diamond",
                        symbolOffset: ["0%", "-60%"],
                        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                        itemStyle: {
                            normal: {
                                borderColor: '#4AA8E3',
                                borderWidth: 2,
                                color: '#4AA8E3',
                            },
                        },
                    },
                ]
            })
        }
    }
}

</script>
